<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
		<!--引入外部第三方css文件-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style type="text/css">
			#button{
				margin-top: 10px;
			}
		</style>
	</head>
	
	<!--本页有部分代码参考菜鸟教程，详情可访问
	    https://www.runoob.com/try/try.php?filename=bootstrap3-form-basic
	-->
	
	<body>
		<div class="container"><!--container 容器（要记住这个单词）-->
			<h1>学生信息管理系统mis</h1>
			<!--span和label的区别
			    span字体不加粗，label字体加粗
				label中写for语句后，点击即可定位到对应id的输入框
			-->
			<div class="form-group">
				<label for="name">姓名：</label>
				<br />
				<!--文本输入框-->
				<!--H5新特性
				    placeholder属性，添加输入框提示语；
					type里面可以限制输入框类型，text 文本类型，number 数字类型，
					radio 单选类型（name相同才可互斥，checked 默认选择），
					checkbox 下拉框，button 按钮（按钮可简写，如下）
				-->
				<input type="text" name="name" id="name" placeholder="请输入姓名..." class="form-control" />
			</div>
			
			<div class="form-group">
				<label>年龄：</label>
				<br />
				<input type="number" name="age" id="age" placeholder="请输入年龄..."  class="form-control"/>
			</div>
			
			<div class="form-group">
				<label>性别：</label>
				<br />
				<div class="radio-inline">
					<input type="radio" name="sex" id="sex" checked="checked" />男<!--checked 默认选择-->
				</div>
				<div class="radio-inline">
					<input type="radio" name="sex" id="sex" />女
				</div>
				
			</div>
			
			<div class="form-group">
				<label>爱好：</label>
				<br />
				<div class="checkbox-inline">
					<input type="checkbox" name="hobby" id="hobby" />乒乓球
				</div>
				<div class="checkbox-inline">
					<input type="checkbox" name="hobby" id="hobby" />爬山
				</div>
				<div class="checkbox-inline">
					<input type="checkbox" name="hobby" id="hobby" />唱歌
				</div>
			</div>
			
			<div class="form-group">
				<label>学历：（下拉框）</label>
				<br />
				<!--单选，选择“幼儿园”，表单提交“1”-->
				<select name="edu" id="edu">
					<option value="1">幼儿园</option>
					<option value="2">小学</option>
					<option value="3">初中</option>
					<option value="4">高中</option>
					<option value="5">专科</option>
					<option value="6">本科</option>
					<option value="7">研究生</option>
					<option value="8">博士</option>
				</select>
			</div>
			
			<div class="form-group">
				<!--class属性支持多个样式，中间用空格隔开-->
				<input type="button" name="submit" value="保存"  class="btn btn-primary"/>
				<button name="clear" class="btn btn-default">取消</button><!--按钮可简写-->
				<button type="submit" class="btn btn-danger">重写</button>
				<div id="button">
					<button type="submit" class="btn btn-group-justified">返回顶部</button>
				</div>
				
			</div>
		</div>
	</body>
</html>
